<template>
  <div class="container">
    <div class="title-bg">
      <span @click="$router.go(-1)"><img src="~images/common/return.png"></span>
      <span>从所有出入记录中筛选</span>
    </div>
    <div>
      <!-- 时间 -->
      <ItemPicker
        :title="sutTimeTitle"
        @saveValue= "timePicker"
        :defaultValue="stuTimeDefaultValue"
        :defaultColumns="stuTimeColumns"
      />
      <!-- 体温 -->
      <ItemPicker
        :title="sutTemperatureTitle"
        @saveValue="temperPicker"
        :defaultValue="stuTemperatureDefaultValue"
        :defaultColumns="stuTemperatureColumns"
      />
      <!-- 宿舍 -->
      <MultiPicker
        @saveValue="dormitoryPicker"
        :title="sutDormitoryTitle"
        :defaultValue="stuDormitoryDefaultValue"
        :defaultColumns="stuDormitoryColumns"
      />
      <!-- 学院 班级 -->
       <ItemPicker
        :title="sutClassTitle"
         @saveValue="classPicker"
        :defaultValue="stuClassDefaultValue"
        :defaultColumns="stuClassColumns"
      />
      <!-- 老师 -->
      <TeachPicker
        @saveValue="teachPicker"
      />
      <!-- 性别 -->
      <ItemPicker
        :title="sutGenderTitle"
        @saveValue="genderPicker"
        :defaultValue="stuGenderDefaultValue"
        :defaultColumns="stuGenderColumns"
      />
      <!-- 年龄 -->
      <MultiPicker
        @saveValue="agePicker"
        :title="sutAgeTitle"
        :defaultValue="stuAgeDefaultValue"
        :defaultColumns="stuAgeColumns"
      />
    </div>
    <div class="screen-btn" @click="screenClick">赛选</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryForm: {},
      /* 时间 */
      sutTimeTitle: '起止时间',
      stuTimeDefaultValue: {
        value: '最近一周',
      },
      stuTimeColumns: ['最近一周', '最近一月', '最近一年'],
      /* 学院 班级 */
      sutClassTitle: '学院 / 专业 / 行政班',
      stuClassDefaultValue: {
        value: '19级 /包装学院 / 包装工程 / 19策划2班',
      },
      stuClassColumns: [
        // 第一列
        {
          values: ['17级', '18级', '19级', '20级', '21级'],
          defaultIndex: 1,
        },
        // 第二列
        {
          values: ['包装学院', '法律学院', '计算机学院'],
          defaultIndex: 1,
        },
        // 第三列
        {
          values: ['包装工程', '法学', '软件工程'],
          defaultIndex: 1,
        },
        // 第四列
        {
          values: ['19策划二班', '19法学三班', '软件工程八班'],
          defaultIndex: 1,
        },

      ],
      /* 学生体温 */
      sutTemperatureTitle: '异常类型',
      stuTemperatureDefaultValue: {
        value: '体温异常 / 体温高于 37 °C',
      },
      stuTemperatureColumns: [
        // 第一列
        {
          values: ['体温异常', '体温异常', '体温异常', '体温异常', '体温异常'],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ['体温高于 37 °C', '体温高于 40 °C', '体温高于 42 °C'],
          defaultIndex: 1,
        },
      ],
      /* 宿舍楼 */
      sutDormitoryTitle: '宿舍楼',
      stuDormitoryDefaultValue: {
        value1: '第一宿舍公寓',
        value2: '第二宿舍公寓',
      },
      stuDormitoryColumns: [],
      /* 性别 */
      sutGenderTitle: '学生性别',
      stuGenderDefaultValue: {
        value: '男',
      },
      stuGenderColumns: ['男', '女'],
      /* 学生年龄 */
      sutAgeTitle: '学生年龄',
      stuAgeDefaultValue: {
        value1: '15',
        value2: '19',
      },
      stuAgeColumns: [
        // 第一列
        {
          values: ['18岁', '19岁', '20岁', '21岁', '22岁', '23岁'],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ['18岁', '19岁', '20岁', '21岁', '22岁', '23岁'],
          defaultIndex: 1,
        },
      ],
    }
  },
  created() {
    this.getDormitory()
  },
  methods: {
    getDormitory() {
      this.$api.panel.getDormitory({}).then(res => {
        const data = res.data
        const build = data.reduce((accumulator, currentValue) => {
          const room = currentValue.dormitory_arr.reduce((accumulator, currentValue) => {
            /* 宿舍房间 */
            let obj = {
              id: currentValue.dormitory_id,
              text: currentValue.dormitory_number,
            }
            accumulator.push(obj)
            return accumulator
          },[])
          /* 宿舍楼 */
          let obj = {
            id: currentValue.build_id,
            text: currentValue.build_name,
            children: room,
          }
          accumulator.push(obj)
          return accumulator
        },[])
        this.stuDormitoryColumns.push(...build)
      })
    },
    genderPicker(value) {
      /* 性别 */
      this.queryForm.staff_sex = value
    },
    temperPicker(value) {
      /* 体温 */
      this.queryForm.temperature= value
    },
    timePicker(value) {
      /* 时间 */
      console.log(value)
    },
    teachPicker (value) {
      /* 老师 */
      this.queryForm.teacher_id = value
    },
    dormitoryPicker(value) {
      /* 宿舍 */
      console.log(value)
    },
    agePicker(value) {
      /* 年龄 */
      console.log(value)
    },
    classPicker(value) {
      /* 学院  专业  班级 */
      this.queryForm.college_id =value[0]
      this.queryForm.pro_id = value[1]
      this.queryForm.class_id = value[2]
    },
    screenClick() {
      this.$router.push({
        name: 'recordScreen',
        params: {
          screen:this.queryForm,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  padding-bottom: 60px;
  .title-bg {
    height: 60px;
    width: 100%;
    background: url('~images/common/screen_title_bg.png') no-repeat;
    background-size: 100% 100%;
    span {
      &:first-child {
        position: absolute;
        top: 23px;
        left: 23px;
        display: grid;
        place-items: center;
        width: 18px;
        height: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:last-child {
        position: absolute;
        top: 22px;
        left: 108px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
  .screen-btn {
    position: fixed;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 345px;
    height: 40px;
    background: #2A529F;
    border-radius: 5px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;


  }
}

</style>